<template>
  <div class="tab-wrapper">
    <router-link to="/me/order/all"
                 tag="div"
                 class="item"><span>全部</span></router-link>
    <router-link to="/me/order/paid"
                 tag="div"
                 class="item"><span>已支付</span></router-link>
    <router-link to="/me/order/nonPayment"
                 tag="div"
                 class="item"><span>未支付</span></router-link>
  </div>
</template>
<script>
export default {
  name: 'orderTab'
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.tab-wrapper
  position fixed
  top 88px
  left 0
  height 67px
  display flex
  z-index 10
  width 100%
  background-color $common_bgc
  box-shadow 0px 6px 14px 0px rgba(5, 5, 5, 0.14)

  .item
    flex 1
    height 100%
    display flex
    justify-content center
    align-items flex-end

    span
      width 104px
      font-size $address
      color $common_fz_color
      border-bottom 4px solid transparent
      box-sizing border-box
      line-height 46px
      text-align center

  .router-link-active span
    border-color $tab_active
    color $tab_active
</style>
